import './index.less';

import React from 'react';
import {observer, inject} from 'mobx-react';
import {Button, Row, Col} from 'antd';
import {WeaTop, WeaRightMenu, WeaLocaleProvider} from 'ecCom';
import AdvanceSearch from './AdvanceSearch';
import FlowTimeChart from './FlowTimeChart';
import FlowAnalyseCount from '../report-public/flow-analyse-count/index';
import FlowReportDetail from '../report-public/flow-report-detail/index';
import RequestList from '../report-public/request-list/index';
import ReportNoRight from '../report-public/report-no-right/index';

const getLabel = WeaLocaleProvider.getLabel;
/**
 * 流程流转时间分析表入口
 *
 */
@inject('flowTimeAnalyseStore')
@observer
export default class Main extends React.Component {
    constructor(props) {
        super(props);

        const {flowTimeAnalyseStore} = props;
        const {initDatas} = flowTimeAnalyseStore;
        initDatas && initDatas();
    }

    componentWillUnmount() {
        const {reSet} = this.props.flowTimeAnalyseStore;
        reSet && reSet();
    }

    componentWillReceiveProps(nextProps) {
        if (this.props.location.key !== nextProps.location.key) {
            const {clearStatus, initDatas} = this.props.flowTimeAnalyseStore;
            this.refs.advanceSearchCom.setState({isShowAllType:false});
            clearStatus();
            initDatas();
        }
    }

    render() {
        const {flowTimeAnalyseStore} = this.props;
        const {loading = false, advanceSearchPara = {}, analyseData = {}, advanceSearchData = {}, iswf = false, modalParams = {}} = flowTimeAnalyseStore;
        const {updateAdvanceSearchPara, showModal, closeModal, updateModalPara} = flowTimeAnalyseStore;
        const {echart1 = [], echart2 = [], countData = []} = analyseData;
        const {noRight = false, bottomInfo = ''} = advanceSearchData;
        return (
            <div className="report-flowtime-analyse">
                {noRight ?
                    <ReportNoRight ecId={`${this && this.props && this.props.ecId || ''}_ReportNoRight@9vhi11`}/>
                    :
                    <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@v20wnn`} loading={loading} icon={<i className='icon-coms-workflow'/>} buttons={this.getButtons()}
                            iconBgcolor='#0079DE' title={getLabel(388254, '流程效率分析')} showDropIcon={false}>
                        <AdvanceSearch ecId={`${this && this.props && this.props.ecId || ''}_AdvanceSearch@mzfm9r`} ref={'advanceSearchCom'} advanceSearchPara={advanceSearchPara}
                                       updateAdvanceSearchPara={updateAdvanceSearchPara}
                                       advanceSearchData={advanceSearchData} iswf={iswf}/>
                        <FlowAnalyseCount ecId={`${this && this.props && this.props.ecId || ''}_FlowAnalyseCount@jq7cjy`} datas={countData} showDetailModal={showModal}/>
                        <div className="flowtime-analyse-chart">
                            <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@1009lx`}>
                                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@vuuhpo`} span={12}><FlowTimeChart ecId={`${this && this.props && this.props.ecId || ''}_FlowTimeChart@htpkiy`} loading={loading} iswf={iswf} eChartDatas={echart1}
                                                              showModal={showModal}/> </Col>
                                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@yccwr3`} span={12}><FlowTimeChart ecId={`${this && this.props && this.props.ecId || ''}_FlowTimeChart@8nysv4`} loading={loading} iswf={iswf} isOperatorChart={true}
                                                              eChartDatas={echart2} showModal={showModal}/></Col>
                            </Row>
                        </div>
                        <FlowReportDetail ecId={`${this && this.props && this.props.ecId || ''}_FlowReportDetail@cjx7dg`} closeModal={closeModal} updateModalPara={updateModalPara} {...modalParams} />
                        <div className='count-bottom'>{bottomInfo}</div>
                    </WeaTop>
                }
            </div>
        )
    }

    getButtons() {
        const {flowTimeAnalyseStore} = this.props;
        const {iswf = false, goBack} = flowTimeAnalyseStore;
        let btns = [];
        if (iswf) {
            btns.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@cqf7qn@return`} type="primary" onClick={() => {
                goBack && goBack()
            }}>{getLabel(1290,'返回')}</Button>);
        }
        return btns;
    }
}
